<template>
	<view class="search">
		<u-navbar 
		title="搜索" 
		back-icon-color="#ffffff"
		title-color="#ffffff"
		title-size="34"
		:border-bottom="false"
		:background="background"></u-navbar>
		<u-search 
		placeholder="搜索开发者" 
		:show-action="false"
		@search="search"
		v-model="keyword"></u-search>
		<view class="hot_search">
			<view class="search_title">
				热门搜索
			</view>
			<view class="hots">
				<text class="tags">JAVA开发工程师</text>
				<text class="tags">前端开发工程师</text>
			</view>
		</view>
		<view class="historical_search">
			<view class="search_title">
				搜索历史
			</view>
			<view class="historical">
				<text class="tags">JAVA开发工程师</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components:{

		},
		data() {
			return {
				background: {
					backgroundColor:"#4A90E2"
				},
				keyword:''
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		methods: {
			search(){
				uni.redirectTo({
				    url: "/pages/Search/result"
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search{
		padding:  0 30rpx;
		/deep/.u-content{
			height: auto!important;
			padding: 30rpx 0;
			background-color: transparent!important;
			border-bottom: 1px solid #E6E6E6;
			border-radius: 0!important;
			.u-input{
				background-color: transparent!important;
				font-size: 28rpx;
				font-weight: 400;
				color: #AEAEAE;
				line-height: 40rpx;
				margin-left: 30rpx;
			}
		}
		.hot_search{
			margin-top: 30rpx;
			
			.hots{
				margin-top: 20rpx;
				text{
					border: 1px solid #4A90E2;
					color: #4A90E2;
					
				}
			}
		}
		.historical_search{
			margin-top: 80rpx;
			.historical{
				margin-top: 20rpx;
				text{
					background: #F9F9F9;
					color: #333333;
				}
			}
		}
		.tags{
			padding: 12rpx 22rpx;
			display: inline-block;
			border-radius: 8rpx;
			margin-right: 30rpx;
			margin-bottom: 20rpx;
			font-size: 24rpx;
			font-weight: 400;
		}
		.search_title{
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			line-height: 40rpx;
		}
	}
	
</style>
